<template>
  <view style="padding: 20rpx;background: #F5F5F5;height: 100vh">
    <view class="box">
      <view class="box-item" v-for="(item, index) in arr" :key="index">
        <img v-if="item.logo" :src="item.logo" class="box-item-img" alt="">
		<img v-else src='https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_logo.png'  class="box-item-img">
        <view class="box-item-mid">
          <view class="box-item-mid-1">
            <text class="box-item-mid-1-txt">{{item.nickname}}</text>
            
          </view>
          <view class="box-item-mid-2">{{item.updateTime}}</view>
        </view>
       <view class="box-item-right" @click="ifsub(item)">取消关注</view>
      </view>
    </view>
	<view class="flex justify-center items-center c_9" v-if="arr.length==0">
		暂无粉丝
	</view>
  </view>
</template>

<script>
	import {
		banFans,
		subscribeAll
	} from '@/api/activity.js';
  export default {
    data() {
      return {
        arr: [
         
        ]
      }
    },
	onLoad() {
		 this.getList();
	},
    onPullDownRefresh() {
        this.getList();
        setTimeout(function () {
          uni.stopPullDownRefresh();
        }, 1000);
      },
    methods: {
		//订阅
		ifsub(item){
			banFans({uid:item.uid}).then(res=>{
				uni.showToast({
					title: '取消成功',
          icon: 'none'
				})
        this.getList()
			})
		},
      getList() {
		  
		  subscribeAll().then(res=>{
			  this.arr = res.data
		  })
      }
    }
  }
</script>

<style lang="scss">
.box {
  border-radius: 20rpx;
  background-color: #fff;
  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 710rpx;
    padding: 25rpx 30rpx;
    height: 130rpx;
    border-bottom: 1px solid #efefef;
    
    &-img {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }
    &-right {
      display: flex;
      padding: 12rpx 18rpx;
      justify-content: center;
      align-items: center;
      border-radius: 1000px;
      border: 1px solid #505050;
      background-color: #fff;
      color: #505050;
      font-family: PingFang SC;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
    }
    &-mid {
      margin-left: 24rpx;
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: cneter;
      &-1 {
        display: flex;
        align-items: center;
        &-txt {
          color: #525252;
          font-family: PingFang SC;
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
        }
        &-img {
          width: 14rpx;
          height: 14rpx;
        }
      }
      &-2 {
        color: #979797;
        font-family: PingFang SC;
        font-size: 22rpx;
        font-style: normal;
        font-weight: 400;
      }
    }
  }
}
</style>
